<template>
  <div class="alarm-table">
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        label="时间"
        width="180"
      >
        <template v-slot="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 10px">{{ fnMoment(scope.row.time) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="人员"
        width="140"
      >
        <template v-slot="scope">
          <el-tag size="medium">{{ scope.row.name }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="违规图片"
        width="180"
      >
        <template v-slot="scope">
          <el-image fit="contain" :src="fnPicUrl(scope.row.picture)" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button
            size="mini"
            @click="handleBigPic(scope.$index, scope.row)"
          >查看大图</el-button>
          <!--          <el-button-->
          <!--            size="mini"-->
          <!--            type="danger"-->
          <!--            @click="handleDelete(scope.$index, scope.row)"-->
          <!--          >删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :visible.sync="dialogVisible"
      :close="dialogClose"
      title="违规图片"
      width="50%"
    >
      <el-image :src="tmpPicUrl" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAlarmPic } from '@/api/alarm'
import moment from 'moment'
import { BASE_DETECT_URL } from '@/api/realTime'

export default {
  name: 'AlarmTable',
  props: {
    type: {
      type: String,
      default: 'border',
      required: true
    }
  },
  data() {
    return {
      tableData: [],
      loading: true,
      dialogVisible: false,
      tmpPicUrl: ''
    }
  },
  created() {
    this.getAlarmPic()
  },
  methods: {
    handleBigPic(index, row) {
      console.log(index, row)
      this.dialogVisible = true
      this.tmpPicUrl = `${BASE_DETECT_URL}${row.picture}`
    },
    dialogClose() {
      this.tmpPicUrl = ''
    },
    async getAlarmPic() {
      const { result } = await getAlarmPic(this.type)
      console.log(result.slice(0, 10))
      this.tableData = result.slice(0, 10)
      this.loading = false
    },
    fnMoment(time) {
      moment.locale('zh-cn')
      return moment(time * 1000).format('dddd, MMMM Do YYYY, h:mm:ss a')
    },
    fnPicUrl(url) {
      // console.log(`${BASE_DETECT_URL}url`)
      return `${BASE_DETECT_URL}${url}`
    }
  }
}
</script>

<style scoped>

</style>
